<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: aqua;
        /* 
          浮动元素不会覆盖文字， 文字会自动环绕在浮动元素的周围；
              所以我们可以使用浮动来设置文字环绕图片的效果
       */
        /* float: left; */
      }

      .box2 {
        background-color: red;
        /* 
            元素设置浮动后，会脱离文档流, 因此元素的一些特点也随着发生变化:
            
            脱离文档流的特点:
                块元素:
                    1. 块元素不再独占页面的一行
                    2. 脱离文档流后块元素的宽度和高度都被内容撑开

         */
        float: left;
      }

      .box3 {
        /* float: left; */
      }

      .s1 {
        /* 
            浮动对于行内元素的影响：
                行内元素脱离文档流后会变为块元素， 特点和块元素一样
         */
        float: left;
        width: 100px;
        height: 100px;
        background-color: #bfa;
      }
      /* 脱离文档流后不用再区分块和行内元素 */
    </style>
  </head>
  <body>
    <!-- <div class="box"></div>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error ad, dolore
      iure accusantium facere perspiciatis quaerat. Magnam nostrum praesentium
      necessitatibus, voluptate dolorem, cupiditate culpa modi similique facere
      vero voluptas fugit?Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Molestiae nemo voluptate at a sit aperiam suscipit, dolorem autem
      molestias quod tempora reiciendis consequuntur quasi magni, atque ratione,
      quo perspiciatis nostrum. Nihil tempora animi nostrum ea, tenetur ratione
      dicta obcaecati ipsam rerum esse delectus possimus provident suscipit quod
      est assumenda sit voluptatem minus. Dicta doloremque fugit ea cupiditate
      obcaecati harum? Ducimus. Laudantium ipsam vero aliquam optio ducimus
      vitae. Distinctio, nam maxime voluptatem odio magnam possimus molestias.
      Sint voluptate obcaecati, recusandae, exercitationem numquam perspiciatis
      ipsum at ut commodi nulla repellat, enim omnis? Ipsum, nam sed. Cumque
      odio voluptas eveniet ab doloremque, vitae ratione recusandae minima quos
      officia exercitationem a quibusdam quis rem sint earum consequatur ducimus
      atque! Sit fugit voluptas ad molestiae!
    </p> -->
    <div class="box2">hello</div>
    <div class="box3">morning</div>
    <span class="s1">good</span>
  </body>
</html>
